import { _decorator, Component, Graphics, Node, Color, CCInteger } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('cocosmos.loading-logo')
export class LoadingLogo extends Component {

    @property(Graphics) public painter: Graphics;
    @property(CCInteger) public lineWidth: number = 4;

    @property(Node) public p1: Node;
    @property(Node) public p2: Node;
    @property(Node) public p3: Node;
    @property(Node) public sun: Node;

    protected start(): void {
        this.painter.lineWidth = this.lineWidth;
        this.p1.active = this.p2.active = this.p3.active = this.sun.active = false;
    }

    protected update(dt: time.sec): void {
        this.sun.angle += dt * 30;
    }

    public setProgress(pct: num.pct): void {
        this.p1.active = this.p2.active = this.p3.active = this.sun.active = true;
        const add = Math.max(pct * Math.PI * 2 - 0.2, 0);
        this.painter.clear();
        [this.p1, this.p2, this.p3].forEach((p, i) => {
            const [color, radius, start] = params[i];
            const deg = start + add - 0.07 * (5 - i);
            if (deg > 0) {
                this.painter.strokeColor = color;
                this.painter.arc(0, 0, radius, start, deg, true);
                this.painter.stroke();
            }
            p.angle = Math.parseDegree(start + add);
        });
    }
}

declare type params = [Color, number, num.rad];
const p1: params = [new Color(222, 121, 255, 255), 100, Math.PI * 0.25];
const p2: params = [new Color(255, 121, 175, 255), 150, Math.PI * 0.75];
const p3: params = [new Color(121, 212, 255, 255), 200, Math.PI * 0.5];
const params = [p1, p2, p3];